import { useState, useRef, useCallback } from 'react';

export type ResizeDirection = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';

export type ModalPosition = 'top' | 'bottom' | 'left' | 'right';

interface ResizeState {
  width: number;
  height: number;
  x: number;
  y: number;
  isResizing: boolean;
  direction: ResizeDirection | null;
}

interface UseMultiDirectionResizeOptions {
  enabled: boolean;
  position: ModalPosition;
  draggable?: boolean; // 是否可拖拽，影响位置补偿逻辑
  minWidth?: number;
  minHeight?: number;
  maxWidth?: number;
  maxHeight?: number;
  onResizeStart?: (direction: ResizeDirection) => void;
  onResize?: (width: number, height: number) => void;
  onResizeEnd?: () => void;
}

// 获取光标样式
const getCursorStyle = (direction: ResizeDirection): string => {
  const cursorMap: Record<ResizeDirection, string> = {
    n: 'ns-resize',
    s: 'ns-resize',
    e: 'ew-resize',
    w: 'ew-resize',
    ne: 'nesw-resize',
    nw: 'nwse-resize',
    se: 'nwse-resize',
    sw: 'nesw-resize',
  };
  return cursorMap[direction];
};

// 根据模态框位置获取可用的调整方向
const getAvailableDirections = (position: ModalPosition): ResizeDirection[] => {
  switch (position) {
    case 'bottom':
      // 底部弹出：用户可以向上和左右调整
      return ['ne', 'nw', 'n']; // 右上角、左上角、顶部边缘
    case 'top':
      // 顶部弹出：用户可以向下和左右调整
      return ['se', 'sw', 's']; // 右下角、左下角、底部边缘
    case 'left':
      // 左边弹出：用户可以向右和上下调整
      return ['se', 'ne', 'e']; // 右下角、右上角、右边缘
    case 'right':
      // 右边弹出：用户可以向左和上下调整
      return ['sw', 'nw', 'w']; // 左下角、左上角、左边缘
    default:
      return ['se', 'sw', 'ne', 'nw', 'n', 's', 'e', 'w']; // 所有方向
  }
};

export const useMultiDirectionResize = ({
  enabled,
  position,
  draggable = false,
  minWidth = 200,
  minHeight = 150,
  maxWidth,
  maxHeight,
  onResizeStart,
  onResize,
  onResizeEnd,
}: UseMultiDirectionResizeOptions) => {
  const [resizeState, setResizeState] = useState<ResizeState>({
    width: 0,
    height: 0,
    x: 0,
    y: 0,
    isResizing: false,
    direction: null,
  });

  const startPositionRef = useRef({ x: 0, y: 0 });
  const startSizeRef = useRef({ width: 0, height: 0 });
  const startModalPositionRef = useRef({ x: 0, y: 0 });
  const isResizingRef = useRef(false);
  const currentDirectionRef = useRef<ResizeDirection | null>(null);

  // 创建调整大小处理函数
  const createResizeHandler = useCallback(
    (direction: ResizeDirection) => {
      console.log(
        `🔧 创建调整大小处理器: ${direction}, enabled: ${enabled}, position: ${position}`
      );

      return (event: React.MouseEvent | React.TouchEvent) => {
        console.log(
          `🔧 开始调整大小: ${direction}, enabled: ${enabled}, position: ${position}`
        );

        if (!enabled) {
          console.log('❌ 调整大小被禁用');
          return;
        }

        event.preventDefault();
        event.stopPropagation();

        const target = event.currentTarget.closest(
          '.modal-sheet'
        ) as HTMLElement;
        if (!target) {
          console.log('❌ 找不到 .modal-sheet 元素');
          return;
        }

        const rect = target.getBoundingClientRect();
        const clientX =
          'touches' in event ? event.touches[0].clientX : event.clientX;
        const clientY =
          'touches' in event ? event.touches[0].clientY : event.clientY;

        console.log('🔧 调整大小开始位置:', {
          direction,
          position,
          clientX,
          clientY,
          rect: {
            width: rect.width,
            height: rect.height,
            left: rect.left,
            top: rect.top,
          },
        });

        startPositionRef.current = { x: clientX, y: clientY };
        startSizeRef.current = { width: rect.width, height: rect.height };
        startModalPositionRef.current = { x: rect.left, y: rect.top };
        currentDirectionRef.current = direction;

        isResizingRef.current = true;
        setResizeState(prev => ({
          ...prev,
          isResizing: true,
          direction,
        }));

        onResizeStart?.(direction);

        // 内联事件处理函数
        const handleMoveEvent = (moveEvent: MouseEvent | TouchEvent) => {
          if (!isResizingRef.current || !currentDirectionRef.current) return;

          const moveClientX =
            'touches' in moveEvent
              ? moveEvent.touches[0].clientX
              : moveEvent.clientX;
          const moveClientY =
            'touches' in moveEvent
              ? moveEvent.touches[0].clientY
              : moveEvent.clientY;

          const deltaX = moveClientX - startPositionRef.current.x;
          const deltaY = moveClientY - startPositionRef.current.y;

          const direction = currentDirectionRef.current;
          let newWidth = startSizeRef.current.width;
          let newHeight = startSizeRef.current.height;
          let newX = startModalPositionRef.current.x;
          let newY = startModalPositionRef.current.y;

          // 🎯 对于可拖拽的弹框，只计算尺寸，不计算位置补偿
          if (draggable) {
            // 可拖拽弹框：只调整尺寸，位置由拖拽系统控制
            switch (direction) {
              case 'se': // 右下角：增加宽度和高度
                newWidth += deltaX;
                newHeight += deltaY;
                break;
              case 'sw': // 左下角：减少宽度，增加高度
                newWidth -= deltaX;
                newHeight += deltaY;
                break;
              case 'ne': // 右上角：增加宽度，减少高度
                newWidth += deltaX;
                newHeight -= deltaY;
                break;
              case 'nw': // 左上角：减少宽度和高度
                newWidth -= deltaX;
                newHeight -= deltaY;
                break;
              case 'n': // 顶部：减少高度
                newHeight -= deltaY;
                break;
              case 's': // 底部：增加高度
                newHeight += deltaY;
                break;
              case 'e': // 右侧：增加宽度
                newWidth += deltaX;
                break;
              case 'w': // 左侧：减少宽度
                newWidth -= deltaX;
                break;
            }
          } else {
            // 不可拖拽弹框：根据方向和Modal位置计算新尺寸和位置
            switch (direction) {
              case 'se': // 右下角
                if (position === 'left') {
                  // 左边弹出：向右下拖拽，增加宽度和高度，但不调整X位置
                  newWidth += deltaX; // 不调整newX，让CSS的left定位来处理
                  newHeight += deltaY;
                } else if (position === 'top') {
                  // 顶部弹出：向右下拖拽，增加宽度和高度，但不调整Y位置
                  newWidth += deltaX;
                  newHeight += deltaY; // 不调整newY，让CSS的top定位来处理
                } else {
                  // 底部和右边弹出：正常处理
                  newWidth += deltaX;
                  newHeight += deltaY;
                }
                break;
              case 'sw': // 左下角
                if (position === 'right') {
                  // 右边弹出：向左下拖拽，调整宽度和高度
                  newWidth -= deltaX; // 不调整newX，让CSS的right定位来处理
                  newHeight += deltaY;
                } else if (position === 'top') {
                  // 顶部弹出：向左下拖拽，调整宽度和高度，但不调整Y位置
                  newWidth -= deltaX;
                  newX += deltaX;
                  newHeight += deltaY; // 不调整newY，让CSS的top定位来处理
                } else {
                  // 底部和左边弹出：正常处理
                  newWidth -= deltaX;
                  newHeight += deltaY;
                  newX += deltaX;
                }
                break;
              case 'ne': // 右上角
                newWidth += deltaX;
                if (position === 'bottom') {
                  // 底部弹出：只调整高度，不调整位置（CSS会自动处理定位）
                  newHeight -= deltaY; // 向上拖拽，deltaY为负，减去负数 = 增加高度
                  // 不调整newY，让CSS的bottom定位来处理
                } else {
                  // 顶部弹出：向上拖拽应该减少高度，向上移动Modal
                  newHeight -= deltaY;
                  newY += deltaY;
                }
                break;
              case 'nw': // 左上角
                newWidth -= deltaX;
                newX += deltaX;
                if (position === 'bottom') {
                  // 底部弹出：只调整高度，不调整位置（CSS会自动处理定位）
                  newHeight -= deltaY; // 向上拖拽，deltaY为负，减去负数 = 增加高度
                  // 不调整newY，让CSS的bottom定位来处理
                } else {
                  // 顶部弹出：向上拖拽应该减少高度，向上移动Modal
                  newHeight -= deltaY;
                  newY += deltaY;
                }
                break;
              case 'n': // 顶部边缘
                if (position === 'bottom') {
                  // 底部弹出：只调整高度，不调整位置（CSS会自动处理定位）
                  newHeight -= deltaY; // 向上拖拽，deltaY为负，减去负数 = 增加高度
                  // 不调整newY，让CSS的bottom定位来处理
                } else {
                  // 顶部弹出：向上拖拽应该减少高度，向上移动Modal
                  newHeight -= deltaY;
                  newY += deltaY;
                }
                break;
              case 's': // 底部边缘
                if (position === 'top') {
                  // 顶部弹出：只调整高度，不调整位置（CSS会自动处理定位）
                  newHeight += deltaY;
                  // 不调整newY，让CSS的top定位来处理
                } else {
                  // 底部弹出：向下拖拽应该减少高度，但不移动位置（固定在底部）
                  newHeight += deltaY;
                }
                break;
              case 'e': // 右边缘
                if (position === 'left') {
                  // 左边弹出：只调整宽度，不调整位置（CSS会自动处理定位）
                  newWidth += deltaX;
                  // 不调整newX，让CSS的left定位来处理
                } else if (position === 'right') {
                  // 右边弹出：向右拖拽应该减少宽度，向右移动Modal
                  newWidth += deltaX;
                  newX += deltaX;
                } else {
                  // 其他位置：正常处理
                  newWidth += deltaX;
                }
                break;
              case 'w': // 左边缘
                if (position === 'right') {
                  // 右边弹出：只调整宽度，不调整位置（CSS会自动处理定位）
                  newWidth -= deltaX;
                  // 不调整newX，让CSS的right定位来处理
                } else if (position === 'left') {
                  // 左边弹出：向左拖拽应该减少宽度，向左移动Modal
                  newWidth -= deltaX;
                  newX += deltaX;
                } else {
                  // 其他位置：正常处理
                  newWidth -= deltaX;
                  newX += deltaX;
                }
                break;
            }
          }

          // 应用最小/最大尺寸限制
          newWidth = Math.max(minWidth, newWidth);
          newHeight = Math.max(minHeight, newHeight);

          if (maxWidth) newWidth = Math.min(maxWidth, newWidth);
          if (maxHeight) newHeight = Math.min(maxHeight, newHeight);

          console.log('🔧 调整大小计算:', {
            direction,
            position,
            draggable,
            deltaX,
            deltaY,
            newWidth,
            newHeight,
            newX,
            newY,
            positionCompensation: draggable ? '已禁用' : '已启用',
          });

          // 🎯 对于可拖拽的弹框，完全不存储位置偏移，避免与拖拽系统冲突
          const shouldStorePosition =
            !draggable &&
            !['bottom', 'top', 'left', 'right'].includes(position);

          setResizeState(prev => ({
            ...prev,
            width: newWidth,
            height: newHeight,
            // 可拖拽弹框：不存储位置偏移，位置由拖拽系统控制
            // 不可拖拽弹框：只有非固定位置才存储位置偏移
            x: shouldStorePosition ? newX : prev.x,
            y: shouldStorePosition ? newY : prev.y,
          }));

          onResize?.(newWidth, newHeight);
        };

        const handleEndEvent = () => {
          console.log('🔧 调整大小结束');

          isResizingRef.current = false;
          setResizeState(prev => ({
            ...prev,
            isResizing: false,
            direction: null,
          }));

          onResizeEnd?.();

          // 移除全局事件监听器
          document.removeEventListener('mousemove', handleMoveEvent);
          document.removeEventListener('mouseup', handleEndEvent);
          document.removeEventListener('touchmove', handleMoveEvent);
          document.removeEventListener('touchend', handleEndEvent);
        };

        // 添加全局事件监听器
        if ('touches' in event) {
          document.addEventListener('touchmove', handleMoveEvent);
          document.addEventListener('touchend', handleEndEvent);
        } else {
          document.addEventListener('mousemove', handleMoveEvent);
          document.addEventListener('mouseup', handleEndEvent);
        }
      };
    },
    [
      enabled,
      position,
      draggable,
      onResizeStart,
      onResize,
      onResizeEnd,
      minWidth,
      minHeight,
      maxWidth,
      maxHeight,
    ]
  );

  // 获取可用的调整大小方向
  const availableDirections = getAvailableDirections(position);

  // 创建调整大小手柄的props
  const getResizeHandleProps = useCallback(
    (direction: ResizeDirection) => ({
      onMouseDown: createResizeHandler(direction),
      onTouchStart: createResizeHandler(direction),
      style: { cursor: getCursorStyle(direction) },
      'data-direction': direction,
    }),
    [createResizeHandler]
  );

  // 重置大小状态
  const resetSize = useCallback(() => {
    setResizeState({
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      isResizing: false,
      direction: null,
    });
  }, []);

  return {
    resizeState,
    resetSize,
    availableDirections,
    getResizeHandleProps,
    resizeStyles:
      resizeState.width > 0 && resizeState.height > 0
        ? (() => {
            const baseStyles = {
              width: `${resizeState.width}px`,
              height: `${resizeState.height}px`,
            };

            // 根据位置决定定位方式
            if (position === 'bottom') {
              // 底部弹出：只设置宽高，让CSS的bottom定位来处理位置
              return baseStyles;
            } else if (position === 'top') {
              // 顶部弹出：只设置宽高，让CSS的top定位来处理位置
              return baseStyles;
            } else if (position === 'left') {
              // 左边弹出：只设置宽高，让CSS的left定位来处理位置
              return baseStyles;
            } else if (position === 'right') {
              // 右边弹出：只设置宽高，让CSS的right定位来处理位置
              return baseStyles;
            } else {
              // 其他情况：设置绝对位置（在 ModalSheet 中会根据拖拽状态决定是否应用）
              return {
                ...baseStyles,
                left: `${resizeState.x}px`,
                top: `${resizeState.y}px`,
                position: 'fixed' as const,
              };
            }
          })()
        : {},
  };
};
